<script setup>
import { reactive, ref } from 'vue';
import { getimagelist, addimageclass } from '@/api/image.js'
import Drower from '@/components/Drower.vue'
import { CirclePlus, UploadFilled } from "@element-plus/icons-vue";
const h = window.innerHeight || document.body.clientHeight || document.documentElement.clientHeight;
const containerheight = h - 100;
console.log(h);
// 侧边栏分页数据
const total = ref(20)
const pagesize = ref(10)
const pageindex = ref(1)
const imagelist = ref([])
const isloading = ref(false)
const fromref = ref(null)
const getImageList = () => {
    isloading.value = true
    getimagelist(pageindex.value).then(res => {
        // console.log(res);
        imagelist.value = res.list
        total.value = res.totalCount
    }).finally(() => {
        isloading.value = false
    })
}
getImageList()
const currentchange = (e) => {
    pageindex.value = e
    getImageList()
}
const drawerdata = ref(null)
const newadd = () => {
    drawerdata.value.open()
}
// 新增图库
const form = ref({
    name: '',
    order: 1
})
const rules = reactive({
    name: [
        { required: true, message: '请输入图库名称', trigger: 'blur' },
        { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
    ],
    order: [
        { required: true, message: '请输入图库顺序', trigger: 'blur' },
        { type: 'number', message: '请输入数字', trigger: 'blur' }
    ]
})

const submit = () => {
    fromref.value.validate((valid) => {
        if (valid) {
            addimageclass(form.value).then(res => {
                console.log(res);
                drawerdata.value.close()
                getImageList()
            })
        } 
    })
}

</script>

<template>
    <el-container class="container1">
        <el-header class="header">
            <el-button type="primary" icon="CirclePlus" @click="newadd">新建</el-button>
            <el-button type="success" icon="UploadFilled">上传</el-button>
        </el-header>
        <div class="main-container">
            <el-aside class="aside" v-loading="isloading">
                <div class="logo">
                    <ul class="flex justify-between items-center aside-ul " v-for="(item, index) in imagelist"
                        :key="item.index">
                        <span>{{ item.name }}</span>
                        <li>
                            <el-tag class="ml-2" type="success">编辑</el-tag>
                            <el-tag class="ml-2" type="success">删除</el-tag>
                        </li>
                    </ul>
                </div>
                <div>
                    <span>
                        <el-pagination background layout="prev,pager,  next" :total="total" :page-size="pagesize"
                            @current-change="currentchange" :default-current="pageindex" />
                    </span>
                </div>
            </el-aside>
            <el-container class="main">

            </el-container>
        </div>
    </el-container>
    <Drower ref="drawerdata" title="编辑图库" size="30%" @enter2="submit">
        <el-form :model="form" ref="fromref" :rules="rules">
            <el-form-item label="" prop="name">
                <el-input v-model="form.name" placeholder="请输入图库名称"></el-input>
            </el-form-item>
            <el-form-item label="请输入图库顺序" prop="order">
                <el-input-number v-model="form.order" size="small" :min="1" :max="10" :step="1" :controls="true"
                    controls-position="">
                </el-input-number>
            </el-form-item>
        </el-form>
    </Drower>
</template>
<style>
.container1 {
    /* background-color: aqua; */
    height: 85vh;
}

.header {
    background-color: #ffffff;
    border-bottom: #aaaaaa 1px solid;
    display: flex;
    align-content: center;
    flex-direction: row;
    align-items: center;
    width: 100vw;
}

.aside {
    /* background-color: darkgreen; */
    height: 78vh;
    width: 200px;
    border-right: 1px solid #aaaaaa;
}

.aside {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

.aside-ul {
    /* padding: 10px 0px; */
    width: 100%;
    border: #eee 1px solid;
    padding: 10px;
    background-color: #ffffff;
}

.logo {
    height: auto;
    width: 199px;
}

.footer {
    background-color: darkseagreen;
}
</style>